<template>
  <div class="region-list hostel-page">
    <div class="header">
      <div class="header-input">
        <img class="search-left" @click="goBackMain" src="../../../static/left.png" alt="">
        <input class="search-input"  :class="$store.state.localLang == 'MM' ? 'fontsforweb_fontid_40615' : ''" onfocus="this.blur();" :value="getInfoValue" @click.self.prevent="showIfram" type="text"
               :placeholder="$t('m.PropertyName') + '/' + $t('m.Street')">
      </div>
      <div class="line-white"></div>
      <mt-tabbar v-model="selected">
        <mt-tab-item class="tab-box" id="0" @click.native="onClicktab(0)">
          <span class="tab-title">{{townshipValue}}</span> <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="1" @click.native="onClicktab(1)">
          <span class="tab-title">{{hostelTypeValue}}</span> <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="2" @click.native="onClicktab(2)">
          <span class="tab-title">{{priceValue}}</span> <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="3" @click.native="onClicktab(3)">
          <span class="tab-title">{{roomValue}}</span> <span class="san-box"></span>
        </mt-tab-item>
      </mt-tabbar>
    </div>
    <!--顶部input搜索-->
    <div class="search-ifram" v-show="iframShow">
      <mt-radio
        :title="$t('m.Search')"
        v-model="radioValue"
        :options="options">
      </mt-radio>
      <div class="info-input-box">
        <input
          class="info-input"
          :class="$store.state.localLang == 'MM' ? 'fontsforweb_fontid_40615' : ''"
          v-model="infoValue"
          cancel-text=""
          placeholder="">
      </div>
      <div class="btn-box">
        <mt-button @click="hideIfram" type="default" class="button Back-btn">{{$t('m.Back')}}</mt-button>
        <mt-button type="default" class="button" @click="onSearch">{{$t('m.Search')}}</mt-button>
      </div>
    </div>
    <!--location 选择层-->
    <mt-popup
      v-model="LocationPopupVisible"
      popup-transition="popup-fade"
      style="width: 100%;height: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="township-box">
        <li class="township-box-wrap" v-for="item in townshipCurrent"
            @click="clickTownshipItem($event, item.value, item.text)">
          <div class="township-item location-item">{{item.text}}</div>
        </li>
      </ul>
    </mt-popup>
    <!--Type 选择层-->
    <mt-popup
      v-model="typePopupVisible"
      popup-transition="popup-fade"
      style="width: 100%;height: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="type-box">
        <li class="type-box-wrap" v-for="item in hostelCurrent"
            @click="clickHostelTypeItem($event, item.value, item.text)">
          <div class="type-item location-item">{{item.text}}</div>
        </li>
      </ul>
    </mt-popup>
    <!--Price 选择层-->
    <mt-popup
      v-model="PricePopupVisible"
      popup-transition="popup-fade"
      style="width: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="hostel-price-box">
        <li class="hostel-price-box-wrap" v-for="item in PriceArr"
            @click="clickPriceItem($event, item.value, item.text, item.min, item.max)">
          <div class="hostel-price-item">{{item.text}}</div>
        </li>
      </ul>
      <div class="price-box">
        <input class="price-input" v-model="conFirmMinValue" :maxlength="9" type="text">
        <span>-</span>
        <input class="price-input" v-model="conFirmMaxValue" :maxlength="9" type="text">
        <span>Ks</span>
        <div class="price-btn">
          <mt-button class="cancel-btn" @click="onPriceCancel" type="default">{{$t('m.Cancel')}}</mt-button>
          <mt-button class="confirm-btn" @click="onConfirmPrice" type="default">{{$t('m.Confirm')}}</mt-button>
        </div>
      </div>
    </mt-popup>
    <!--Room 选择层-->
    <mt-popup
      v-model="RoomPopupVisible"
      popup-transition="popup-fade"
      style="width: 100%;overflow: auto;"
      :closeOnClickModal="true"
      class="popup-wrap"
      :modal="true"
      position="bottom">
      <div class="room-check-box">
        <div class="room-type-check">
          <ul class="type-list-box">
            <li class="type-list-items" v-for="item in roomJson"  @click="clickRoomType($event, item.value, item.text)">
              <div>{{item.text}}</div>
            </li>
          </ul>
        </div>
        <mt-checklist
          align="right"
          v-model="moreForm.bedroomPerson"
          :options="jsonList"
          class="room-type-check"
        >
        </mt-checklist>
      </div>

      <div class="roomtype-btn-box">
        <mt-button class="reset-btn btn-item" @click="onCancelRoom" type="default">{{$t('m.Cancel')}}</mt-button>
        <mt-button class="reset-btn btn-item" @click="onResetRoom" type="default">{{$t('m.Reset')}}</mt-button>
        <mt-button class="confirm-btn btn-item" @click="onConfirmRoom" type="default">{{$t('m.Confirm')}}</mt-button>
      </div>
      <!--<mt-picker :slots="slots" @change="onSoltValuesChange"></mt-picker>-->
    </mt-popup>

    <!--列表-->
    <div class="list-box">
    <mt-loadmore :top-method="reFreshList" topPullText="" topDropText="" topLoadingText="" ref="loadmore">
      <div class="list-items"
           v-infinite-scroll="loadMoreItems"
           infinite-scroll-disabled="loading"
           infinite-scroll-distance="50">
        <div class="hostel-list" v-for="item in tableData" @click="goToDetail(item.landlordPropertyId)">
          <div class="hostel-list-box">
            <div class="hostel-img-box">
              <img v-lazy="item.photoUrl" class="hostel-img" :style="defaultImage" alt=""/>
            </div>
            <div class="hostel-info-box">
              <p style="color:#2c3e50;">{{ item.propertyName?translateUTZaw(item.propertyName) :''}}</p>
              <p style="color:#2c3e50;">{{ item.street?translateUTZaw(item.street)+',' :''
                }}{{getTownshipId(item.townshipId)}},{{getRegionId(item.regionId)}}</p>
              <p>{{getHostelType(item.hostelTypeId)}}</p>
              <p>{{item.floorLevel}}</p>
              <p>{{getDepositType(item.depositType, item.depositFee)}}</p>
            </div>
          </div>
          <div class="room-type-box" v-for="list in item.landlordPropertyRoomList">
            <span class="room-type" style="color:#2c3e50;">{{getRoomType(list.roomType, list.roomTypeDesc)}}</span>
            <span class="room-type room-type-time" style="color:rgb(74, 214, 98);">{{getRoomDate(list.roomDatetime)}}</span>
            <span class="room-fee price-currency" v-if="list.fee">{{regexNum(list.fee)}}&nbsp;Ks</span>
          </div>
        </div>
        <div class="loading-more-box" v-if="loading">
          <mt-spinner :type="3" class="loading-more"></mt-spinner>
          <!--<span class="loading-more-text">加载中。。。</span>-->
        </div>
        <div v-if="this.pageData.pageNum >= this.pageInfo.totalPages" class="no-data">No data</div>
      </div>

    </mt-loadmore>
    </div>
  </div>
</template>

<script>
  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import buySort from '@/json/buySort'
  import hostelTypes from '@/json/hostelTypes'
  import depositType from '@/json/depositType'
  import bedroom from '@/json/bedroom'
  import hall from '@/json/hall'
  import roomTypes from '@/json/roomType'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_buySort from '@/mmJson/buySort'
  import mm_hostelTypes from '@/mmJson/hostelTypes'
  import mm_depositType from '@/mmJson/depositType'
  import mm_bedroom from '@/mmJson/bedroom'
  import mm_hall from '@/mmJson/hall'
  import mm_roomTypes from '@/mmJson/roomType'
  // 缅甸unicode
  import mmu_propertyType from '@/mmUnicodeJson/propertyType'
  import mmu_propertySubType from '@/mmUnicodeJson/propertySubType'
  import mmu_regions from '@/mmUnicodeJson/region'
  import mmu_townships from '@/mmUnicodeJson/township'
  import mmu_buySort from '@/mmUnicodeJson/buySort'
  import mmu_hostelTypes from '@/mmUnicodeJson/hostelTypes'
  import mmu_depositType from '@/mmUnicodeJson/depositType'
  import mmu_bedroom from '@/mmUnicodeJson/bedroom'
  import mmu_hall from '@/mmUnicodeJson/hall'
  import mmu_roomTypes from '@/mmUnicodeJson/roomType'

  import {searchHostelList} from '../../api/mgc_api'
  import qs from 'qs'
  export default {
    name: 'Hostel',
    data () {
      return {
        defaultImage: {
          backgroundImage: "url(" + require("../../../static/default.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "auto 100%",
          backgroundPositionX: "center",
        },
        // defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        loading: false,

        getInfoValue: '',
        iframShow: false,
        selected: '',
        townshipValue: 'Location',
        LocationPopupVisible: false,
        isGetTownshipList: false,
        townshipIdSelsected: '',
        hostelTypeValue: 'Type',
        typePopupVisible: false,
        isGetTypeList:false,
        hostelTypeSelsected: '',
        priceSelsected: '',
        priceValue: 'Price',
        PricePopupVisible: false,
        roomSelsected: '',
        roomTypeValue: '',
        roomValue: 'Room',
        RoomPopupVisible: false,
        radioValue: 'propertyName',
        infoValue: '',

        townships: [],
        propertySubType: [],
        jsonList: [],
        showMore: false,
        searchForm: {
          regionId: 2,
          townshipId: [],
          hostelType:null,
          priceMin: '',
          priceMax: '',
        },
        moreForm: {
          room: null,
          bedroomPerson: [],
          floorLevel: [],
          others: [],
        },
        noDeposit: false,
        canCookRice: false,
        canCookFood: false,
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableData: [],
        sortForm: '',
        isBedroom:false,
        isRefresh:false,
        conFirmMaxValue: null,
        conFirmMinValue: null
      }
    },
    computed: {
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_propertyType
        } else {
          return propertyType
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_regions
        } else {
          return regions
        }
      },
      township() {
        if (this.$store.state.localLang == 'MM') {
          return mm_townships
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_townships
        } else {
          return townships
        }
      },
      hostelTypes(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hostelTypes
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_hostelTypes
        } else {
          return hostelTypes
        }
      },
      depositTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_depositType
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_depositType
        } else {
          return depositType
        }
      },
      bedRoomJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_bedroom
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_bedroom
        } else {
          return bedroom
        }
      },
      hallJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hall
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_hall
        } else {
          return hall
        }
      },
      buySortJson(){
        if(this.$store.state.localLang == 'MM'){
          return [
            {
              "text": "ေစ်းႏွဳန္း (အနည္းဆံုးမွ အမ်ားဆံုးသို႔)",
              "value": "price asc"
            },

            {
              "text": "ေစ်းႏွဳန္း (အမ်ားဆံုးမွ အနည္းဆံုးသို႔)",
              "value": "price desc"
            },
          ]
        }else {
          return [
            {
              "text": "Price (low to high)",
              "value": "price asc"
            },
            {
              "text": "Price (high to low)",
              "value": "price desc"
            },
          ]
        }
      },
      roomTypesJson (){
        if(this.$store.state.localLang == 'MM'){
          return mm_roomTypes
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_roomTypes
        } else {
          return roomTypes
        }
      },
      roomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အိပ္ခန္း", "value": 3},
            {"text": "အခန္းက်ယ္", "value": 4},
            {"text": "ထပ္ခိုး", "value": 1},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Bedroom", "value": 3},
            {"text": "Hall", "value": 4},
            {"text": "Mezzanine", "value": 1},
          ]
        }
      },
      floorLevelJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "​ေျမညီထပ္​ -2", "value": 2},
            {"text": "3-5", "value": 3},
            {"text": "6-10", "value": 6},
            {"text": "11+", "value": 11},
          ]
        } else {
          return [
            {"text": "Ground-2", "value": 2},
            {"text": "3-5", "value": 3},
            {"text": "6-10", "value": 6},
            {"text": "11+", "value": 11},
          ]
        }
      },
      roomPersonJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {label: "၁ ေယာက္ခန္း", value: 1},
            {label: "၂ ေယာက္ခန္း", value: 2},
            {label: "၃ ေယာက္ခန္း", value: 3},
            {label: "၄ ေယာက္ခန္း", value: 4},
            {label: "၅ ေယာက္ႏွင့္အထက္", value: 5},
          ]
        } else {
          return [
            {label: "1 person", value: 1},
            {label: "2 person", value: 2},
            {label: "3 person", value: 3},
            {label: "4 person", value: 4},
            {label: "5+ person", value: 5},
          ]
        }
      },
      options (){
        if(this.$store.state.localLang == 'MM'){
          return[
            {
              label: 'အိမ္ျခံေျမ အမည္',
              value: 'propertyName',
            },
            {
              label: 'လမ္း',
              value: 'Street'
            },
            {
              label: 'စာရင္းအမွတ္',
              value: 'ListingID'
            }
          ]
        }else {
          return [
            {
              label: 'Property name',
              value: 'propertyName',
            },
            {
              label: 'Street',
              value: 'Street'
            },
            {
              label: 'Listing ID',
              value: 'ListingID'
            }
          ]
        }

      },
      townshipCurrent (){
        if(this.$store.state.localLang == 'MM'){
          return [{text: 'အားလံုး', value: 'Any'}]
        }else{
          return [{text: 'Any', value: 'Any'}]
        }
      },
      hostelCurrent (){
        if(this.$store.state.localLang == 'MM'){
          return [{text: 'အားလံုး', value: 'Any'}]
        }else{
          return [{text: 'Any', value: 'Any'}]
        }
      },
      PriceArr() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {value: 'Any', text: 'အားလံုး', min: null, max: null},
            {value: '0', text: '<30,000 Ks', min: null, max: 30000},
            {value: '30000', text: '30,000-50,000 Ks', min: 30000, max: 50000},
            {value: '50000', text: '50,000-70,000 Ks', min: 50000, max: 70000},
            {value: '70000', text: '70,000-100,000 Ks', min: 70000, max: 100000},
            {value: '100000', text: '100,000-150,000 Ks', min: 100000, max: 150000},
            {value: '150000', text: '>150,000 Ks', min: 150000, max: null},
          ]
        } else {
          return [
            {value: 'Any', text: 'Any', min: null, max: null},
            {value: '0', text: '<30,000 Ks', min: null, max: 30000},
            {value: '30000', text: '30,000-50,000 Ks', min: 30000, max: 50000},
            {value: '50000', text: '50,000-70,000 Ks', min: 50000, max: 70000},
            {value: '70000', text: '70,000-100,000 Ks', min: 70000, max: 100000},
            {value: '100000', text: '100,000-150,000 Ks', min: 100000, max: 150000},
            {value: '150000', text: '>150,000 Ks', min: 150000, max: null},
          ]
        }
      },
      titleJson (){
        if(this.$store.state.localLang == 'MM'){
          return [
            {text: 'တည္ေနရာ', value: 0},
            {text: 'အခန္း', value: 1},
            {text: 'ေစ်းႏွဳန္း', value: 2},
            {text: 'အခန္း', value: 3},
          ]
        }else{
          return [
            {text: 'Location', value: 0},
            {text: 'Type', value: 1},
            {text: 'Price', value: 2},
            {text: 'Room', value: 3},
          ]
        }
      },
    },
    methods: {
      hideIfram: function () {
        this.iframShow = false;
      },
      showIfram: function () {
        this.iframShow = true;
        // this.infoValue = this.getInfoValue;
      },
      goBackMain: function () {
        // this.$router.push('main');
        history.back()
      },
      onSearch: function () {
        this.iframShow = false;
        this.getInfoValue = this.infoValue;
        // 调用搜索的接口
        this.getList(1)
        this.isRefresh = true;
      },
      onPriceCancel: function () {
        this.PricePopupVisible = false
      },
      // translateStreet(item){
      //   if(this.$i18n.locale == 'MM'){
      //     return  item.street;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(item.street,'zawgyiTounicode')
      //   }else {
      //     return item.street;
      //   }
      // },
      // translatePropertyName(item){
      //   if(this.$i18n.locale == 'MM'){
      //     return  item.propertyName;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(item.street,'zawgyiTounicode')
      //   }else {
      //     return item.propertyName;
      //   }
      // },
      onCancelRoom: function () {
        this.RoomPopupVisible = false
      },
      onClicktab: function (id) {
        if (id == 0) { // location
          if(!this.isGetTownshipList) {
            let township = this.township;
            for (var t = 0; t < township.length; t++) {
              if (this.searchForm.regionId == township[t].regionId) {
                this.townshipCurrent.push({value: township[t].value, text: township[t].text})
              }
            }
            this.isGetTownshipList = true
          }
          // 如果是首次打开则将any 设置为黄色
          if (!this.townshipIdSelsected) {
            var arr = document.getElementsByClassName('township-box-wrap')
            // 设置当前的dom
            arr[0].style.background = '#FF9800'
            arr[0].style.color = '#fff'
          }
          this.LocationPopupVisible = true;
        } else if (id == 1) { // Type
          if(!this.isGetTypeList){
            let hostelType = this.hostelTypes;
            for (var t = 0; t < hostelType.length; t++) {
              this.hostelCurrent.push({value: hostelType[t].value, text: hostelType[t].text})
            }
            this.isGetTypeList = true
          }

          // 如果是首次打开则将any 设置为黄色
          if (!this.hostelTypeSelsected) {
            var arr = document.getElementsByClassName('type-box-wrap')
            // 设置当前的dom
            arr[0].style.background = '#FF9800'
            arr[0].style.color = '#fff'
          }
          this.typePopupVisible = true;
        }else if(id == 2){ // Price
          this.PricePopupVisible = true;
        }else if(id == 3){  // Room
          // 如果是首次打开则将any 设置为黄色
          if (!this.roomSelsected) {
            var arr = document.getElementsByClassName('type-list-items')
            // 设置当前的dom
            arr[0].style.background = '#FF9800'
            arr[0].style.color = '#fff'
          }
          this.RoomPopupVisible = true;
        }
      },
      clickTownshipItem: function (event, value, text) { // 点击选择城镇
        var e = event.currentTarget
        // 清除其余选择态
        var arr = document.getElementsByClassName('township-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        // 选择了城镇之后保存到state  并且loaction中做显示
        if (value == 'Any') {
          this.townshipIdSelsected = ''
          this.townshipValue = this.titleJson[0].text
          this.searchForm.townshipId = []
        } else {
          this.townshipIdSelsected = value
          this.townshipValue = text
          this.searchForm.townshipId = [value]
        }

        this.LocationPopupVisible = false

        this.isRefresh = true
        this.getList(1)
      },
      clickHostelTypeItem: function (event, value, text) { // 点击选择 hostelType
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('type-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        // 选择了 hostelType 之后保存到state  并且type中做显示
        if (value == 'Any') {
          this.hostelTypeSelsected = '';
          this.hostelTypeValue = this.titleJson[1].text;
          this.searchForm.hostelType = null
        } else {
          this.hostelTypeSelsected = value;
          this.hostelTypeValue = text;
          this.searchForm.hostelType = value
        }

        this.typePopupVisible = false
        this.isRefresh = true
        this.getList(1)
      },
      clickRoomType: function (event, value, text){
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('type-list-items')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        // 选择了 hostelType 之后保存到state  并且type中做显示
        if (value == 'Any') {
          this.roomSelsected = '';
          this.roomTypeValue = this.titleJson[3].text;
          this.moreForm.room = null
        } else {
          this.roomSelsected = value;
          this.roomTypeValue = text;
          this.moreForm.room = value
        }
        if (value == 3) {
          this.jsonList = this.roomPersonJson
        } else {
          this.jsonList = []
          this.moreForm.bedroomPerson = []
        }
        console.log(this.moreForm.room)
      },
      clickPriceItem: function (event, value, text, min, max) { // 点击选择 price选项
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('hostel-price-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        // 选择了 hostelType 之后保存到state  并且type中做显示
        if (value == 'Any') {
          this.priceSelsected = '';
          this.priceValue = this.titleJson[2].text;
        } else {
          this.priceSelsected = value;
          this.priceValue = text;
        }

        this.PricePopupVisible = false;

        this.conFirmMinValue = null
        this.conFirmMaxValue = null
        this.searchForm.priceMin = min
        this.searchForm.priceMax = max
        this.isRefresh = true
        this.getList(1)
      },
      onSoltValuesChange(picker, values) {
        // 首先peropertyTypeId设置
        for (let i = 0; i < this.propertyType.length; i++) {
          if (this.propertyType[i].text == values[0]) {
            this.propertyTypeId = this.propertyType[i].value;
          }
        }

        let  arrhh = []

        for (let i = 0; i < this.propertySubType.length; i++) {
          if (this.propertySubType[i].propertyTypeId == this.propertyTypeId) {
            arrhh.push(this.propertySubType[i].text)
          }
        }

        arrhh.unshift('Any')
        if(values[0] === 'Any'){
          let arr = ['Any']
          picker.setSlotValues(1,arr);
        }else {
          picker.setSlotValues(1,arrhh);
        }

        // 设置选择的propertySubTypeId
        for (let i = 0; i < this.propertySubType.length; i++) {
          if (values[1] == this.propertySubType[i].text) {
            this.propertySubTypeId = this.propertySubType[i].value;
          }
        }

        this.picker = picker;
        console.log(values, '当前选择的文本', this.propertyTypeId, this.propertySubTypeId, '当前选择id')

      },
      onConfirmPrice: function () {
        this.priceSelsected = ''
        this.priceValue = this.titleJson[2].text
        // 清除其余选择态
        var arr = document.getElementsByClassName('hostel-price-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        this.searchForm.priceMin = this.conFirmMinValue
        this.searchForm.priceMax = this.conFirmMaxValue
        this.isRefresh = true
        this.getList(1)
        this.PricePopupVisible = false;
      },
      onConfirmRoom: function () {
        this.roomValue = this.roomTypeValue
        this.isRefresh = true
        this.getList(1)
        this.RoomPopupVisible = false;
      },
      onResetRoom: function () {
        // 将数据全部重制为any
        var arr = document.getElementsByClassName('type-list-items')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        arr[0].style.background = '#FF9800'
        arr[0].style.color = '#fff'
        // this.roomValue = this.roomTypeValue = this.titleJson[3].text
        this.roomTypeValue = this.titleJson[3].text
        this.moreForm.room = null
        this.jsonList = []
        this.moreForm.bedroomPerson = []
      },
      onTapTotalRoom: function (index) {
        this.totalBedroomsArr[index].checked = !this.totalBedroomsArr[index].checked;
      },

      reFreshList(){
        this.isRefresh = true
        this.getList(1)
        this.$refs.loadmore.onTopLoaded()
        return false
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      // getTownships (regionId) {
      //   let town = []
      //   this.townships = []
      //   this.searchForm.townshipId = []
      //   if(this.$store.state.localLang == 'MM'){
      //     for (var t of mm_townships) {
      //       if (regionId === t.regionId) {
      //         town.push({value: t.value, text: t.text})
      //       }
      //     }
      //   } else if(this.$store.state.localLang == 'MMU') {
      //     for (var t of mmu_townships) {
      //       if (regionId === t.regionId) {
      //         town.push({value: t.value, text: t.text})
      //       }
      //     }
      //   } else {
      //     for (var t of townships) {
      //       if (regionId === t.regionId) {
      //         town.push({value: t.value, text: t.text})
      //       }
      //     }
      //   }
      //   this.townships = town
      // },
      // getSubType (type) {
      //   let subType = []
      //   this.propertySubType = []
      //   this.searchForm.propertySubTypeId = []
      //   if(this.$store.state.localLang == 'MM'){
      //     for (var t of mm_propertySubType) {
      //       if (type === t.propertyTypeId) {
      //         subType.push({value: t.value, text: t.text})
      //       }
      //     }
      //   } else if(this.$store.state.localLang == 'MMU') {
      //     for (var t of mmu_propertySubType) {
      //       if (type === t.propertyTypeId) {
      //         subType.push({value: t.value, text: t.text})
      //       }
      //     }
      //   } else {
      //     for (var t of propertySubType) {
      //       if (type === t.propertyTypeId) {
      //         subType.push({value: t.value, text: t.text})
      //       }
      //     }
      //   }
      //   this.propertySubType = subType
      // },
      getTownshipId(id) {
        let str = ''
        this.township.forEach((item) => {
          if (item.value == id) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionId(id) {
        let str = ''
        this.regions.forEach((item) => {
          if (item.value == id) {
            str = item.text || ''
          }
        })
        return str
      },
      getHostelType (f){
        let arr = []
        f =f.split(",")
        this.hostelTypes.forEach((item) => {
          f.forEach((i) => {
            if (item.value == i) {
              arr.push(item.text)
            }
          })
        })
        return arr.toString()
      },
      getDepositType (t, fee){
        let str = ''
        if (t == 2){
          if(fee){
            str = this.regexNum(fee) + ' Ks'
          } else {
            this.depositTypeJson.forEach((item) => {
              if (item.value == t) {
                str = item.text || ''
              }
            })
          }
        } else {
          this.depositTypeJson.forEach((item) => {
            if (item.value == t) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      // roomtype -->  hall/bedroom..
      getRoomType (roomType, roomTypeDesc) {
        let str = ''
        if (roomType == 3) {
          //  Bedroom
          this.bedRoomJson.forEach((item) => {
            if (item.value == roomTypeDesc) {
              str = item.text || ''
            }
          })
        } else if(roomType == 4) {
          //  Hall
          this.hallJson.forEach((item) => {
            if (item.value == roomTypeDesc) {
              str = item.text || ''
            }
          })
        } else {
          this.roomTypesJson.forEach((item) => {
            if (item.value == roomType) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      getRoomDate (value) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        var ts = d + '-' + m + '-' + Y
        return ts
      },
      onRoomChange (val) {
        // for (var i = 0; i < this.moreForm.room.length; i++) {
        //   if (this.moreForm.room[i] == 'Any') {
        //     if (this.moreForm.room[0] == 'Any' && val.length > 1) {
        //       this.moreForm.room.shift()
        //     } else {
        //       this.moreForm.room = ['Any']
        //     }
        //   }
        // }
        if (val == 3) {
          this.isBedroom = true
        } else {
          this.isBedroom = false
          this.moreForm.bedroomPerson = []
          if (val == 'Any') {
            this.moreForm.room = null
          }
        }
      },
      goToDetail(id) {
        // const {href} = this.$router.resolve({
        //   name: 'foo',
        //   path: '/hostelDetails',
        //   query: {
        //     id: id
        //   }
        // })
        // window.open(href, '_blank');
        this.$router.push({
          path:'/hostelDetails',
          query:{
            id: id
          }
        })
      },
      getList(pageNum) {

        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }

        let searchForm = {};

        // 搜索子段处理
        if(this.searchForm.regionId){
          searchForm.regionId = this.searchForm.regionId
        }
        // 搜索propertyname street listingId
        if(this.infoValue){ //如果infovalue 有值的情况下
          if(this.radioValue == 'propertyName'){
            searchForm.propertyName = this.translateZTUnicode(this.infoValue);
          }else if(this.radioValue == 'Street'){
            searchForm.street = this.translateZTUnicode(this.infoValue);
          }else if(this.radioValue == 'ListingID'){
            searchForm.listingId = this.translateZTUnicode(this.infoValue);
          }
        }
        // if(this.searchForm.propertyTypeId){
        //   searchForm.propertyTypeList = this.searchForm.propertyTypeId
        // }
        if(this.searchForm.hostelType){
          searchForm.hostelType = this.searchForm.hostelType
        }
        if (this.searchForm.townshipId.length > 0) {
          searchForm.townshipIdList = this.searchForm.townshipId.join(',')
          // searchForm.propertySubTypeList = this.searchForm.propertySubTypeId.join(',')
        }

        // minPrice
        if(this.searchForm.priceMin){
          searchForm.minPrice = this.searchForm.priceMin
        }
        // maxPrice
        if(this.searchForm.priceMax){
          searchForm.maxPrice = this.searchForm.priceMax
        }

        // sort
        if(this.sortForm){
          searchForm.sort = this.sortForm
        }
        // floor level
        searchForm.roomType = this.moreForm.room
        //bedroom person
        if (this.moreForm.bedroomPerson.length > 0) {
          let j = 0
          for(let i=0;i<this.moreForm.bedroomPerson.length;i++){
            if (this.moreForm.bedroomPerson[i] == 5) {
              searchForm['roomNumberParamModel.minRoomNumber'] = '5'
            } else {
              searchForm['roomNumberParamModel.roomNumberList[' + j + ']'] = this.moreForm.bedroomPerson[i]
              j++
            }
          }
        }
        // floor level
        if (this.moreForm.floorLevel.length > 0) {
          for(let i=0;i<this.moreForm.floorLevel.length;i++){
            if (this.moreForm.floorLevel[i] == 2) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '0'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = '2'
            } else if (this.moreForm.floorLevel[i] == 3) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '3'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = '5'
            } else if (this.moreForm.floorLevel[i] == 6) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '6'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = '10'
            } else if (this.moreForm.floorLevel[i] == 11) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '11'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = ''
            }
          }
        }
        // noDeposit
        if(this.noDeposit){
          searchForm.noDeposit = this.noDeposit
        }

        // canCookRice
        if(this.canCookRice){
          searchForm.canCookRice = this.canCookRice
        }

        // canCookFood
        if(this.canCookFood){
          searchForm.canCookFood = this.canCookFood
        }
        // return false
        searchHostelList(Object.assign(searchForm, this.pageData)).then((res) => {
          // this.tableData = res.data.data.object.list || []

          // 刷新列表 or 加载更多
          if (this.isRefresh) {
            window.scrollTo(0, 0)
            this.tableData = res.data.data.object.list || []
            this.isRefresh = false
          } else {
            this.tableData = this.tableData.concat(res.data.data.object.list)
          }
          // 分页信息配置
          this.pageInfo.totalPages = res.data.data.object.pages
          this.pageInfo.totalCount = res.data.data.object.total
          this.pageData.pageNum = this.pageData.pageNum + 1
          this.loading = false
        }).catch((e) => {
          console.log(e)
        })
      },
      loadMoreItems () {
        if (this.pageData.pageNum >= this.pageInfo.totalPages) return false
        this.loading = true
        //设置延时，规避加载太快无限触发加载下一页
        setTimeout(() => {this.getList()},1000)
        // this.getList()
        return false
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
      translateZTUnicode(str){
        if (!str) return '';
        return this.$translateLang(str, 'zawgyiTounicode')
      },
    },
    mounted () {
      //Title 名称
      this.townshipValue = this.titleJson[0].text
      this.hostelTypeValue = this.titleJson[1].text
      this.priceValue = this.titleJson[2].text
      this.roomValue = this.roomTypeValue = this.titleJson[3].text

      this.searchForm.regionId = this.$store.state.regionId
      if (!this.searchForm.regionId) {
        this.searchForm.regionId = localStorage.getItem('regionIndexId') || 2
      }
      this.getList()
    },
  }
</script>

<style>
  .hostel-page .mint-search {
    height: .6rem;
  }

  .hostel-page .mint-searchbar {
    padding-top: .2rem;
    background-color: #fff;
  }

  .hostel-page .mint-searchbar-inner {
    border: 1px solid #ccc;
  }

  .hostel-page .mint-tabbar {
    background-color: #f2f2f2;
    height: .48rem;
  }

  .hostel-page .mint-tabbar > .mint-tab-item.is-selected {
    background-color: #fff;
    color: #2c3e50;
  }

  .hostel-page .mint-tab-item-label {
    font-size: 14px;
    line-height: .36rem;
    display: flex;
    align-items: center;
  }
  .hostel-page .mint-checklist{
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid #e3e3e3;
    margin-left: 4px;
    margin-right: 12px;
    height: 227px;
    box-sizing: border-box;
  }
  .hostel-page .mint-checklist .mint-checklist-title{
    display: none;
  }
  .hostel-page .mint-checklist .mint-cell{
    min-height: 45px;
  }
  .hostel-page .mint-checkbox-input:checked + .mint-checkbox-core{
    background-color: rgb(255, 153, 0);
    border-color: rgb(255, 153, 0);
  }
  .hostel-page .mint-button--normal{
    padding:0 3px;
  }
  .hostel-page .mint-button{
    font-size:16px;
  }
</style>
<style scoped>
  .roomtype-btn-box{
    padding: .12rem;
    overflow: hidden;
    display: flex;
  }
  .roomtype-btn-box .btn-item{
    flex: 1;
    margin:0 15px 0 0;
  }
  .roomtype-btn-box .btn-item:last-child{
    margin:0;
  }
  .header {
    width: 100%;
    height: .96rem;
    position: fixed;
    z-index: 100;
    background: #f2f2f2;
  }

  .header-input {
    height: .46rem;
    line-height: .46rem;
    text-align: center;
    position: relative;
  }

  .line-white {
    height: 2px;
    background: #fff;
  }

  .search-left {
    position: absolute;
    top: 0.02rem;
    right: 0;
    left: .05rem;
    bottom: 0;
    margin: auto 0;
  }

  .search-input {
    vertical-align: middle;
    width: 65%;
    height: .3rem;
    font-size: 16px;
    border: 1px solid #999;
  }

  .search-ifram {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #fff;
    width: 100%;
    height: 100%;
    display: block;
  }


  .list-box {
    padding-top: .96rem;
  }

  .btn-box {
    margin-top: .2rem;
    text-align: center;
  }

  .Back-btn {
    margin-right: .1rem;
  }

  .san-box {
    width: 0;
    height: 0;
    border-top: 6px solid black;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    display: inline-block;
    line-height: .32rem;
    margin-left: .05rem;
  }

  .township-box,.type-box,.hostel-price-box{
    height: 100%;
    overflow: auto;
    padding: 0;
    border: none;
  }

  .township-item,.type-item,.hostel-price-item{
    height: .32rem;
    border-bottom: 1px solid #ccc;
    line-height: .32rem;
    padding-left: .3rem;
    font-size: 16px;
  }

  .tab-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .reset-btn {
    float: left;
    width: 34%;
    margin-left: 12px;
    margin-right: .1rem;
  }

  .confirm-btn {
    float: right;
    width: 34%;
    color: #fff;
    background: #ff8d00;
    margin-right: 12px;
  }

  .price-box {
    /*height: .6rem;*/
    padding: .1rem .3rem;
  }
  .price-box .confirm-btn{
    width: 20%;
    margin-right:0;
  }
  .price-box .price-btn .confirm-btn{
    flex:1;
    margin-right:0;
  }
  .price-box .price-btn .cancel-btn{
    flex:1;
    margin-right:.15rem;
  }
  .price-input {
    margin-top: .05rem;
    width: .7rem;
    height: .3rem;
    border: 1px solid #ccc;
  }
  .price-box .price-input{
    width: 33%;
    height: 39px;
    margin-top: 0;
  }
  .room-box {
    padding: .2rem;
  }

  .room-title {
    color: #000;
    padding-bottom: .05rem;
  }

  .total-rooms-item-box {
    height: .35rem;
    overflow: hidden;
    padding: 0;
  }

  .total-rooms-item {
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    float: left;
    margin-right: .1rem;
    border: 1px solid #ccc;
    min-width: .3rem;
    border-radius: 5px;
  }

  .total-rooms-item-ed {
    color: #fff;
    background: #ff8e00;
    border: 1px solid #ff8e00;
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    float: left;
    margin-right: .1rem;
    min-width: .3rem;
    border-radius: 5px;
  }


  .list-items {
    width: 100%;
    margin: 0 auto;
  }

  .list-items .el-table__row {
    cursor: pointer;
  }

  .list-items .el-table__row img {
    display: block;
    width: 180px;
    height: 135px;
  }

  .list-items .el-table__row p {
    /*margin: 22px 0;*/
  }
  .room-type{
    display: inline-block;
    line-height: 1.5;
    /*min-width:15%;*/
    /*max-width: 35%;*/
    width:38%;
  }
  .room-type-time{
    width:25%;
    text-align: center;
  }
  .room-type-box .price-currency {
    color: red;
  }
  .hostel-img-box{
    padding:0 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .hostel-img-box .hostel-img{
    width:114px;
    height:100px;
    vertical-align: middle;
  }
  .hostel-info-box{
    padding:0 10px 0 0;
    display:block;
    word-wrap: break-word;
    overflow: hidden;
    flex: 2;
  }
  .hostel-info-box p{
    margin:0;
    text-align: left;
    line-height: 1.5;
  }
  .hostel-info-box p:first-child{
    margin-top:0;
  }
  .hostel-list{
    padding:10px 0;
    border-bottom: 1px solid #ebeef5;
    color:#606266;
    cursor: pointer;
  }
  .hostel-list:hover{
    background: #f5f7fa;
  }
  .hostel-list-box{
    display: flex;
    margin-bottom:5px;
  }
  .room-type-box{
    padding:0 10px;
    text-align: left;
    /*margin-top:5px;*/
  }
  .line-form {
    border-top: 1px solid #eee;
  }
  .no-data{
    height:50px;
    line-height: 50px;
    color:#909399;
    text-align: center;
  }
  .loading-more{
    width:35px;
    display: inline-block;
  }
  img[lazy=loading] {
    margin: auto;
    background: #f0f0f0;
  }
  .loading-more-box{
    padding:10px 0;
    text-align:center;
  }
  .room-fee{
    float:right;
  }
  .room-check-box{
    display: flex;
  }
  .room-type-check{
    flex:1;
  }
  .type-list-box{
    padding:0;
    border: 1px solid #e3e3e3;
    margin-left: 12px;
  }
  .type-list-box li {
    height:45px;
    Line-height:45px;
    text-align:left;
    padding:0 20px;
    border-bottom:1px solid #f0f0f0;
  }
  .type-list-box li:last-child {
    border-bottom:none;
  }
  .is-active{
    color:rgb(255, 153, 0);
  }
  .info-input {
    height: .3rem;
    border: 1px solid #ccc;
    width: 100%;
    outline:none;
  }
  .info-input-box {
    padding-top: .1rem;
    width: 80%;
    margin: 0 auto;
  }
  .location-item {
    height: .48rem;
    line-height: .48rem;
  }
  .cancel-btn{
    margin-right:6px;
    float:right;
    width:20%;
  }
  .price-btn{
    display: flex;
    margin-top:.12rem;
  }
  .confirm-btn{

  }
  .tab-title{
    width: 75%;
    /*display: inline-grid;*/
    overflow: hidden;
  }
</style>
